/* 
    v编辑导航列表页面
 */
<template>
    <div class="editChannelMain">
        <!-- 导航栏 -->
        <van-nav-bar title=" 频道编辑" />

        <!-- 我的频道 -->
        <van-cell title="我的频道" :border="false">
            <van-button slot="default" type="danger" size="mini" plain round v-if="isEdit == false"
                @click="isEdit = true">编辑</van-button>
            <van-button slot="default" type="primary" size="mini" plain round v-else @click="isEdit = false">完成
            </van-button>
        </van-cell>
        <van-grid :gutter="10" clickable class="channelItem">
            <van-grid-item v-for="(item, index) in myChannelList" :key="index"
                @click="handleRemoveChannel(item, index)">
                <span slot="text" :class="{ activelightRed: index == active }">
                    <van-icon name="close" v-if="isEdit && !fixedChannel.includes(item.id)" />{{ item.name }}
                </span>
            </van-grid-item>
        </van-grid>

        <!-- 频道推荐 -->
        <van-cell title="频道推荐" :border="false" />
        <van-grid :gutter="10" clickable class="channelItem">
            <van-grid-item v-for="(item, index) in channels" :key="index" @click="handleAddChannel(item, index)">
                <span slot="text">
                    <van-icon name="plus" />{{ item.name }}
                </span>
            </van-grid-item>
        </van-grid>

    </div>
</template>

<script>
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
    name: 'EditChannel',
    props: {
        myChannelList: {
            type: Array,
            required: true
        },
        active: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            allChannelList: [],
            isEdit: false,//编辑状态
            fixedChannel: [1, 2],//固定频道id数组

            channels: [//这个不需要,从计算属性中拿
                { id: 8, name: 'vant' },
                { id: 9, name: 'www' },
                { id: 10, name: 'aaa' },
            ]
        }
    },
    computed: {
        ...mapState(['user']),
        // 获取推荐频道
        recommendChannel() {
            const that = this
            const channels = []
            that.allChannelList.forEach(item => {
                const data = that.myChannelList.find(res => {
                    return res.id == item.id
                })
                if (!data) {
                    channels.push(item)
                }
            })
            return channels
        }
    },
    created() {
        this.getAllChannel()
    },
    methods: {
        // 频道推荐数据
        async getAllChannel() {
            // const that = this
            // try {
            //     that.allChannelList = 
            // } catch (err) {
            //     this.$toast('频道列表数据获取失败')
            // }
        },
        // 添加频道
        async handleAddChannel(item) {
            // 1.添加到我的频道
            this.myChannelList.push(item)

            // 2.从推荐频道移除=>这里不需要(计算属性会重新执行)
            // this.channels.shift(item)

            // 3.刷新页面添加数据会改变 => 保存编辑数据传入后台(未登录=>本地;已登录=>线上)
            if (this.user) {
                // 已登录=>线上
                // const {res}=await 


            } else {
                // 未登录=>本地
                setItem('channelList', this.myChannelList)
            }
        },
        // 移除频道
        handleRemoveChannel(item, index) {
            if (this.isEdit) {// 编辑状态
                // 4.固定频道不删除
                if (this.fixedChannel.includes(item.id)) {
                    return
                }

                // 1.从我的频道中移除
                // splice(开始索引,个数(不指定,删除到尾))
                this.myChannelList.splice(index, 1)

                // 2.推荐频道添加=>这里不需要(计算属性会重新执行)

                // 3.解决删除激活前面数据active会改变
                if (index <= this.active) {
                    this.$emit('updateActive', this.active - 1, true)
                }

                // 5.刷新页面添加数据会改变=>  保存编辑数据传入后台(未登录=>本地;已登录=>线上)
                if (this.user) {
                    // 已登录=>线上

                } else {
                    // 未登录=>本地
                    setItem('channelList', this.myChannelList)
                }
            } else {
                // 非编辑状态=>将index传给父组件的active
                this.$emit('updateActive', index, false)
            }
        },
    }
}
</script>

<style scoped lang="less">
.editChannelMain {
    width: 100%;
    height: 100%;

    /deep/.van-grid-item {
        height: 43px;

        .van-grid-item__content {
            background: #f4f5f6;
        }
    }

    /deep/ .van-icon-close:before {
        position: absolute;
        right: -50px;
        top: -30px;
        z-index: 999;
    }

    .channelItem {

        span {
            color: #646566;
            font-size: 12px;
            white-space: nowrap;
        }
    }

    .activelightRed {
        color: red !important;
    }
}
</style>